<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<script src="vue.js"></script>
<div id="app">
        <h1 v-html="title"></h1>
        <p v-text="poem"></p>
        <button v-on:click="togglePoem">显示/隐藏诗词</button>
    </div>
    <script>
constcomApp = Vue.createApp({
    data() {
        return {
            title:"<span style='color:red;'>静夜思</span>",
            poem:"床前明月光，疑是地上霜。",
            showPoem:false,
        }
    },
    methods:{
        togglePoem(){
            this.showPoem = ! this.showPoem;
            if(this.showPoem){
                this.poem += "举头望明月，低头思故乡。";
            }else{
                this.poem = "床前明月光，疑是地上霜。";
            }
        },
    },
}).mount("#app");
</script>
</body>
</html>